<template>
  <div>
    <a-modal :open="props.open" :width="props.modelInfo && props.modelInfo.width
        ? props.modelInfo.width
        : '900px'
      " :title="props.modelInfo && props.modelInfo.title
          ? props.modelInfo.title
          : 'Basic Modal'
        " @ok="handleOk" okText="保存" :confirmLoading="modelConfig.confirmLoading"
      :destroyOnClose="modelConfig.destroyOnClose" @cancel="handleCancel">
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">保存</a-button>
      </template>
      <a-form ref="formRef" name="RechargePackageInfoForm" class="ant-advanced-search-form" :model="formState"
        @finish="onFinish" @finishFailed="onFinishFailed" :rules="rulesRef" :label-col="labelCol"
        :wrapper-col="wrapperCol">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item :name="labelMap['packageName'].name" :label="labelMap['packageName'].label">
              <a-input v-model:value="formState.packageName"
                :placeholder="'请填写' + labelMap['packageName'].label"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :name="labelMap['amount'].name" :label="labelMap['amount'].label">
              <a-input-number style="width: 100%" v-model:value="formState.amount"
                :placeholder="'请填写' + labelMap['amount'].label"></a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item :name="labelMap['bonusAmount'].name" :label="labelMap['bonusAmount'].label">
              <a-input-number style="width: 100%" v-model:value="formState.bonusAmount"
                :placeholder="'请填写' + labelMap['bonusAmount'].label"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :name="labelMap['sortOrder'].name" :label="labelMap['sortOrder'].label">
              <a-input-number style="width: 100%" v-model:value="formState.sortOrder"
                :placeholder="'请填写' + labelMap['sortOrder'].label"></a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { RechargePackageInfoDetail } from "./rechargePackageInfoDetailTs";
import {
  getRechargePackageInfoDetail,
  addOrEditRechargePackageInfo,
} from "@/api/commonInfo/rechargePackageInfo/rechargePackageInfoTs";
import { message, FormInstance } from "ant-design-vue";
import { ModelInfo } from "../rechargePackageInfoListTs";

const labelCol = ref({ span: 5 });
const wrapperCol = ref({ span: 19 });

let loading = ref<boolean>(false);

const formRef = ref<FormInstance>();

const labelMap = ref<any>({
  packageName: { name: "packageName", label: "套餐名称" },
  amount: { name: "amount", label: "充值金额" },
  bonusAmount: { name: "bonusAmount", label: "赠送金额" },
  sortOrder: { name: "sortOrder", label: "排序顺序" },
});

const rulesRef = reactive({
  packageName: [
    {
      required: true,
      message: "套餐名称不能为空！",
    },
  ],
  amount: [
    {
      required: true,
      message: "充值金额不能为空！",
    },
  ],
});

const modelConfig = {
  confirmLoading: true,
  destroyOnClose: true,
};

interface Props {
  open?: boolean;
  modelInfo?: ModelInfo;
}
const props = defineProps<Props>();

let formState = ref<RechargePackageInfoDetail>({});

const emit = defineEmits(["handleOk", "handleCancel"]);

const handleOk = (): void => {
  loading.value = true;
  if (formRef.value) {
    formRef.value
      .validateFields()
      .then(() => saveRechargePackageInfoManager())
      .catch(() => {
        loading.value = false;
      });
  }
};

const handleCancel = (): void => {
  emit("handleCancel", false);
};

//保存充值套餐配置表信息
const saveRechargePackageInfoManager = (): void => {
  let method = "";
  if (formState.value.id) {
    method = "put";
  } else {
    method = "post";
  }
  addOrEditRechargePackageInfo(method, formState.value)
    .then((res) => {
      if (res.code == "200") {
        message.success((res && res.message) || "保存成功！");
        emit("handleOk", false);
      } else {
        message.error((res && res.message) || "保存失败！");
      }
      formState.value = {};
    })
    .catch((error: any) => {
      message.error(error?.message || "保存失败！");
    })
    .finally(() => {
      loading.value = false;
    });
};

const onFinish = (values: any): void => {
  console.log("Success:", values);
};

const onFinishFailed = (errorInfo: any): void => {
  console.log("Failed:", errorInfo);
};

const init = (): void => {
  if (props.modelInfo) {
    if (props.modelInfo.id) {
      getRechargePackageInfoDetail(props.modelInfo.id)
        .then((res) => {
          if (res.code == "200") {
            formState.value = res.data;
            modelConfig.confirmLoading = false;
          } else {
            message.error((res && res.message) || "查询失败！");
          }
        })
        .catch((error: any) => {
             message.error(error?.message || "查询失败！");
        });
    } else {
      modelConfig.confirmLoading = false;
      formState.value = {};
    }
  }
};

watch(
  () => props.open,
  (newVal) => {
    if (newVal) {
      init();
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

defineExpose({ handleOk, handleCancel });
</script>
<style lang="scss" scoped></style>
